import React from 'react';
import { Row, Col } from 'antd';
import GGEditor, { Flow,RegisterNode,ItemPanel, Item } from 'gg-editor';
import { FormattedMessage } from 'umi/locale';
import EditorMinimap from '../components/EditorMinimap';
import { FlowContextMenu } from '../components/EditorContextMenu';
import { FlowToolbar } from '../components/EditorToolbar';
import { FlowItemPanel } from '../components/EditorItemPanel';
import { FlowDetailPanel } from '../components/EditorDetailPanel';
import styles from './flow.less';

const Save = React.lazy(() => import('./save'));
GGEditor.setTrackable(false);


class FlowPage extends React.Component {
  state = {
    data: {
      nodes: [

      ],
      edges: []
    }
  };

  render() {
    const startNodeConfig = {
      draw(item) {
        const group = item.getGraphicGroup();
        const model = item.getModel();
        const width = model.width ;
        const height = model.height;
        const x = -width / 2;
        const y = -height / 2;
        const borderRadius = 25;
        const keyShape = group.addShape('rect', {
          attrs: {
            x,
            y,
            width,
            height,
            radius: borderRadius,
          },
        });

        group.addShape('path', {
          attrs: {
            fill: this.color,
          },
        });
        group.addShape('text', {
          attrs: {
            text: model.label ? model.label : this.label,
            x: x + 40,
            y: y + 30,
            textAlign: 'center',
            textBaseline: 'center',
            fill: '#222',
          },
        });
        // 状态 logo
        group.addShape('image', {
          attrs: {
            img: this.state_icon_url,
            x: width / 2 - 24,
            y: y + 12,
            width: 16,
            height: 16,
          },
        });
        return keyShape;
      },
      anchor: [
        [0.5, 0], // 上面边的中点
        [0.5, 1] // 下边边的中点
      ]
    };
    const squareNodeConfig = {
      draw(item) {
        const group = item.getGraphicGroup();
        const model = item.getModel();
        const width = model.width ;
        const height = model.height;
        const x = -width / 2;
        const y = -height / 2;
        const keyShape = group.addShape('rect', {
          attrs: {
            x,
            y,
            width,
            height,
            radius: 5
          },
        });

        group.addShape('path', {
          attrs: {
            fill: this.color,
          },
        });
        group.addShape('text', {
          attrs: {
            text: model.label ? model.label : this.label,
            x: x + 40,
            y: y + 30,
            textAlign: 'center',
            textBaseline: 'center',
            fill: '#222',
          },
        });
        // 状态 logo
        group.addShape('image', {
          attrs: {
            img: this.state_icon_url,
            x: width / 2 - 24,
            y: y + 12,
            width: 16,
            height: 16,
          },
        });
        return keyShape;
      },
      anchor: [
        [0.5, 0], // 上面边的中点
        [0.5, 1] // 下边边的中点
      ]
    };
    const rhombusNodeConfig = {
      draw(item) {
        const group = item.getGraphicGroup();
        const model = item.getModel();
        const width = model.width ;
        const height = model.height;
        const x = -width / 2;
        const y = -height / 2;
        const keyShape = group.addShape('flow-rhombus', {
          attrs: {
            x,
            y,
            width,
            height,
          },
        });

        group.addShape('path', {
          attrs: {
            fill: this.color,
          },
        });
        group.addShape('text', {
          attrs: {
            text: model.label ? model.label : this.label,
            x: x + 40,
            y: y + 30,
            textAlign: 'center',
            textBaseline: 'center',
            fill: '#222',
          },
        });
        // 状态 logo
        group.addShape('image', {
          attrs: {
            img: this.state_icon_url,
            x: width / 2 - 24,
            y: y + 12,
            width: 16,
            height: 16,
          },
        });
        return keyShape;
      },
      anchor: [
        [0.5, 0], // 上面边的中点
        [0.5, 1] // 下边边的中点
      ]
    };
    const circleNodeConfig = {
      draw(item) {
        const group = item.getGraphicGroup();
        const model = item.getModel();
        const keyShape = group.addShape('circle', {
          attrs: {
            x: 0,
            y: 0,
            r: 36,
          },
        });

        group.addShape('path', {
          attrs: {
            fill: this.color,
          },
        });
        group.addShape('text', {
          attrs: {
            text: model.label ? model.label : this.label,
            x: 0,
            y:  4,
            textAlign: 'center',
            textBaseline: 'center',
            fill: '#222',
          },
        });
        return keyShape;
      },
      anchor: [
        [0.5, 0], // 上面边的中点
        [0.5, 1] // 下边边的中点
      ]
    };
    const { data } = this.state;
    return (
      <GGEditor className={styles.editor}>
        <RegisterNode name="start-node" config={startNodeConfig} />
        <RegisterNode name="centre-node" config={squareNodeConfig} />
        <RegisterNode name="condition-node" config={rhombusNodeConfig} />
        <RegisterNode name="action-node" config={circleNodeConfig} />

        <Row type="flex" className={styles.editorHd}>
          <Col span={24}>
            <FlowToolbar />
          </Col>
        </Row>
        <Row type="flex" className={styles.editorBd}>
          <Col span={4} className={styles.editorSidebar}>
            <FlowItemPanel />
          </Col>
          <Col span={16} className={styles.editorContent}>
            <Flow className={styles.flow} data={data}  />
          </Col>
          <Col span={4} className={styles.editorSidebar}>
            <FlowDetailPanel />
            <EditorMinimap />
          </Col>
        </Row>
        <FlowContextMenu />
        <Save />
      </GGEditor>
    );
  }
}

export default FlowPage;
